<template>
  <v-group :config="groupConfig">
    <v-rect :config="rectConfig" v-on="$listeners"/>
    <v-line :config="lineConfig"/>
  </v-group>
</template>

<script>
  import VueKonva from "@/components/vue-konva";

  const {vGroup, vLine, vRect} = VueKonva
  export default {
    name: "vUnderline",
    components: {vGroup, vLine, vRect},
    props: {
      config: Object
    },
    computed: {
      groupConfig() {
        return {
          x: this.config.x,
          y: this.config.y,
          width: this.config.width,
          height: this.config.height,
        }
      },
      rectConfig() {
        return {
          ...this.config,
          // width: this.config.width,
          // height: this.config.height,
          x: 0,
          y: 0,
          stroke: 'transparent',
          fill: 'transparent',
          strokeWidth: 0
        }
      },
      lineConfig() {
        return {
          listening: false,
          stroke: this.config.stroke,
          strokeWidth: this.config.strokeWidth,
          points: [0, this.config.height, this.config.width, this.config.height]
        }
      }
    }
  }
</script>

<style scoped>

</style>
